<template>
	<view v-if="data">
		<image :src="data.image" @click="openImg" style="width: 100%;height: 400rpx;"></image>
		<uni-card>
			<template #title>
				<view style="font-size: 38rpx;">签号</view>
			</template>
			<view class="myView">第{{data.format}}签</view>
		</uni-card>
		<uni-card>
			<template #title>
				<view style="font-size: 38rpx;">签名</view>
			</template>
			<view class="myView">{{data.draw}}</view>
		</uni-card>
		<uni-card>
			<template #title>
				<view style="font-size: 38rpx;">签语</view>
			</template>
			<view class="myView">{{data.annotate}}</view>
		</uni-card>
		<uni-card>
			<template #title>
				<view style="font-size: 38rpx;">解曰</view>
			</template>
			<view class="myView">{{data.explain}}</view>
		</uni-card>
		<uni-card>
			<template #title>
				<view style="font-size: 38rpx;">仙幾</view>
			</template>
			<view class="myView">{{data.details}}</view>
		</uni-card>
		<uni-card>
			<template #title>
				<view style="font-size: 38rpx;">溯源</view>
			</template>
			<view class="myView">{{data.source}}</view>
		</uni-card>
	</view>
</template>
<script setup>
	import { onPullDownRefresh } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	const data=ref(undefined);
	function getData() {
		uni.request({
			url: 'http://shanhe.kim/api/za/chouq.php',
			method: 'GET',
			success: res => {
				data.value=res.data.data;
			},
			complete: () => {
				uni.stopPullDownRefresh();
				uni.showToast({icon:null,title:'获取数据成功'});
			}
		});
	}
	
	function openImg () {
		uni.previewImage({urls:[data.value.image]})
	}
	
	onPullDownRefresh(()=>{getData();});
	getData();
</script>
<style scoped>
	.myView{
		background-color: #ffca0f;
		color: #ff0000;
		font-size: 35rpx;
		padding: 20rpx 10rpx;
	}
</style>